<script setup lang="ts">
import { ElButton, ElTable, ElTableColumn, ElTag } from 'element-plus'
import { defineProps } from 'vue'

const { title } = defineProps({
    title: {
        type: String,
    },
})

function dataList(): any {
    switch (title) {
        case '基本信息':
            return {
                data: [
                    {
                        claerOrder: '24小时',
                        orderDevelopment: '200',
                        orderHarvest: '200',
                        orderId: '202434234234232',
                        orderType: '购房意向金',
                        paymenttype: '未支付',
                        userName: 'woaiwulan',
                    },
                ],
                label: [
                    { label: '订单编号', prop: 'orderId' },
                    { label: '用户账号', prop: 'userName' },
                    { label: '支付方式', prop: 'paymenttype' },
                    { label: '订单类型', prop: 'orderType' },
                    { label: '自动关闭订单时间', prop: 'claerOrder' },
                    { label: '订单可得安居豆', prop: 'orderHarvest' },
                    { label: '订单可得成长值', prop: 'orderDevelopment' },
                ],
            }
        case '购房人信息':
            return {
                data: [
                    {
                        Homebuyer: '123',
                        card: '343434343434',
                        tell: '12345678',
                    },
                    {
                        Homebuyer: '444',
                        card: '23424234242',
                        tell: '34324',
                    },
                ],
                label: [
                    { label: '购房人', prop: 'Homebuyer' },
                    { label: '手机号码', prop: 'tell' },
                    { label: '身份证号码', prop: 'card' },
                ],
            }
        case '商品信息':
            return {
                data: [
                    {
                        companyName: '武汉建设',
                        earnestMoney: '1000000',
                        hous: '1栋1单元',
                        number: '1',
                        platformPrice: '320000',
                        propertyName: '武汉别墅',
                        recordPrice: '300000',
                    },
                ],
                label: [
                    { label: '企业名称', prop: 'companyName' },
                    { label: '楼盘名称', prop: 'propertyName' },
                    { label: '房源', prop: 'hous' },
                    { label: '数量', prop: 'number' },
                    { label: '备案价', prop: 'recordPrice' },
                    { label: '平台售价', prop: 'platformPrice' },
                    { label: '意向金', prop: 'earnestMoney' },
                ],
            }
        case '费用信息':
            return {
                data: [
                    {
                        earnestMoney: '202434234234232',
                        orderAmount: '200000',
                        platformSubsidies: '5000',
                        totalAmount: '2000',
                    },
                ],
                label: [
                    { label: '意向金', prop: 'earnestMoney' },
                    { label: '平台补贴', prop: 'platformSubsidies' },
                    { label: '订单总金额', prop: 'orderAmount' },
                    { label: '应付款金额', prop: 'totalAmount' },
                ],
            }
        case '操作信息':
            return {
                data: [
                    {
                        operator: 'woaiwulan',
                        operatorDate: '2021-11-21 15:43:00',
                        orderState: '已签约',
                        paymentStatus: '已支付',
                        remark: '123455',
                    },
                ],
                label: [
                    { label: '操作者', prop: 'operator' },
                    { label: '操作时间', prop: 'operatorDate' },
                    { label: '订单状态', prop: 'orderState' },
                    { label: '付款状态', prop: 'paymentStatus' },
                    { label: '备注', prop: 'remark' },
                ],
            }
    }
}
function tableHeaderColor(): any {
    return { background: '#E5E6EB', fontSize: '14px' }
}
</script>

<template>
    <div style="padding:20px">
        <h4>{{ title }}</h4>

        <div>
            <ElTable :data="dataList().data"
                     border
                     :header-cell-style="tableHeaderColor"
            >
                <ElTableColumn v-for="item in dataList().label"
                               :key="item.label"
                               :prop="item.prop"
                               :label="item.label"
                >
                    <template #default="scope">
                        <ElTag v-if="title === '基本信息' && item.label === '订单类型'"
                               type="primary"
                        >
                            {{ scope.row.orderType }}
                        </ElTag>

                        <ElTag v-if="title === '操作信息' && item.label === '订单状态'"
                               type="primary"
                        >
                            {{ scope.row.orderState }}
                        </ElTag>

                        <ElTag v-if="title === '操作信息' && item.label === '付款状态'"
                               type="primary"
                        >
                            {{ scope.row.paymentStatus }}
                        </ElTag>

                        <ElButton v-if="title === '商品信息' && item.label === '楼盘名称'"
                                  type="text"
                        >
                            {{ scope.row.propertyName }}
                        </ElButton>

                        <span v-if="title === '费用信息' && item.label === '应付款金额'"
                              style="color:#DA0004"
                        >{{ scope.row.totalAmount }}</span>
                    </template>
                </ElTableColumn>
            </ElTable>

            <div v-if="title === '商品信息'"
                 class="footTotal"
            >
                <span class="text">合计:</span>

                <span class="money">￥20000</span>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    h4 {
    font-size: 20px;
    color: #1d2129;
    font-weight: 600;
    margin-bottom: 20px;
}

.footTotal {
    height: 46px;
    border: 1px solid #f9fafc;
    background: #e5e6eb;
    text-align: end;
    line-height: 46px;
    padding-right: 10px;

    .text {
        font-family: 'PingFang SC';
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0;
        color: #86909c;
    }

    .money {
        color: #da0004;
        font-weight: 600;
        font-size: 20px;
    }
}

:deep(.el-form .el-form-item .el-form-item__label) {
    font-size: 12px;
}

:deep(.el-table__row .el-table__cell .cell) {
    padding: 12px 16px;
    font-size: 12px;
}

:deep(.el-table__header .el-table__cell .cell) {
    font-family: 'PingFang SC';
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    color: #86909c;
}
</style>
